<template>
    <el-dialog
        :title="`开关列表（${activeDevice.name}）`"
        width="1200px"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        destroy-on-close
        append-to-body
        @close="closeAction"
        :visible="visible"
    >
        <el-button type="green" @click="newAction" v-if="editable">
            <i class="iconfont icon-add"></i> 新增
        </el-button>
        <el-table :data="dataList" style="width: 100%;margin-top:20px;" v-loading="loading">
            <el-table-column prop="number" label="设备号" width="80"></el-table-column>
            <el-table-column prop="name" label="设备名称" min-width="60"></el-table-column>
            <el-table-column prop="position" label="安装位置" min-width="120"></el-table-column>
            <el-table-column prop="installtime" label="安装时间" min-width="80"></el-table-column>
            <el-table-column
                prop="transDeviceCode"
                label="传输装置编码"
                min-width="80"
            ></el-table-column>
            <el-table-column prop="currentstate" label="状态" width="60">
                <template slot-scope="scope">
                    <span class="switch-status" v-if="scope.row.currentstate == 1"></span>
                    <span class="switch-status close" v-else></span>
                </template>
            </el-table-column>
            <el-table-column label="操作" v-if="editable">
                <template slot-scope="scope">
                    <div class="nowrap">
                        <el-button type="primary" @click="editAction(scope.row)">
                            编辑
                        </el-button>
                        <el-button type="danger" @click="deleteAction(scope.row)">
                            删除
                        </el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <switchNew
            v-if="newModalVisible"
            :visible.sync="newModalVisible"
            :activeData="activeData"
            :activeDevice="activeDevice"
            :title="newModalTitle"
            @success="onNewSuccess"
        ></switchNew>
    </el-dialog>
</template>

<script>
import { mapState } from "vuex"
import switchNew from "@/components/switch/new.vue"
export default {
    name: "switchList",
    components: { switchNew },
    props: {
        visible: {
            type: Boolean,
        },
        editable: {
            type: Boolean,
            default: true,
        },
        activeDevice: {
            type: Object,
            required: true,
        },
    },
    data() {
        return {
            title: this.$route.query.title || "开关量监测",
            filterForm: {},
            loading: false,
            dataList: [],
            newModalVisible: false,
            newModalTitle: "",
            activeData: null,
        }
    },
    computed: {
        ...mapState(["siteInfos"]),
    },
    created() {
        this.getData(1)
    },
    methods: {
        closeAction() {
            this.$emit("update:visible", false)
        },
        getData(page) {
            this.loading = true
            this.$get("/fireFightingIOT/switch/deviceSwitchList", {
                transDeviceCode: this.activeDevice.transDeviceCode,
            }).then(
                (res) => {
                    this.loading = false
                    this.dataList = res.data
                },
                (err) => {
                    this.loading = false
                    this.dataList = []
                    if (err.msg) {
                        this.$message.error(err.msg)
                    }
                }
            )
        },
        searchAction() {
            this.getData(1)
        },
        handleCurrentChange(page) {
            this.getData(page)
        },

        newAction() {
            this.activeData = null
            this.newModalVisible = true
            this.newModalTitle = "新增开关"
        },
        editAction(item) {
            this.activeData = item
            this.newModalVisible = true
            this.newModalTitle = "编辑开关"
        },
        onNewSuccess() {
            this.getData(this.currentPage)
        },
        deleteAction(item) {
            this.showConfirm("确定删除该开关吗？", () => {
                this.deleting = true
                this.$post("/fireFightingIOT/switch/deviceSwitchDel", {
                    id: item.id,
                }).then(
                    (res) => {
                        this.deleting = false
                        this.$message.success("删除成功")
                        this.getData()
                    },
                    (err) => {
                        this.deleting = false
                        this.$message.error(err.msg)
                    }
                )
            })
        },
    },
}
</script>
<style lang="less" scoped>
.switch-status {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #09ee3f;
    box-shadow: 0 0 inset 10px rgba(0, 0, 0, 0.8);
    &.close {
        background: #999;
    }
}
</style>
